<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
			div {
				width: 200px;
				height: 200px;
				background-color: red;
				transition: all 2s;
				
			}
			div:hover {
				width: 400px;
				transform: translate(50px,50px);/* 平移 */
			}
			p {
				width: 500px;
				height: 100px;
				background-color: pink;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
        </style>
    </head>
    <body>
    <div> </div>
    <p></p>
    </body>
</html>